<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #ggl {
            border:1px solid #ccc;
            position: absolute;
            left:0;
            right:0;
            margin:20px auto;
        }

      
    </style>
</head>
<body>
    <!-- 灰度蒙层 -->
    <canvas id="ggl" width="600" height="600"></canvas>
</body>
<script>
    const ggl=document.querySelector('#ggl')
    const context=ggl.getContext('2d')

    //save,restore

   setInterval(function() {
    //保存画面环境
     context.save();
     
     context.clearRect(0, 0, ggl.width, ggl.height);
     //移动移动中心点
     context.translate(300, 300);

     context.save();
     

    //绘制大圆
    context.beginPath();
    context.lineWidth=10;
    
    context.arc(0, 0, 200, Math.PI / 180 * 0, Math.PI / 180 * 360);
    context.stroke();
    //绘制小圆
    context.beginPath();
    context.lineWidth=4;
    
    context.arc(0, 0, 10, Math.PI / 180 * 0, Math.PI / 180 * 360);
    context.stroke();

    //绘制时针刻度
    for(let i=0;i<12;i++) {
        //旋转角度 
        context.rotate(2*Math.PI/12);
        //绘制时针刻度
        context.beginPath();
        context.moveTo(170, 0);
        context.lineTo(200, 0);
        context.stroke();
    }

    //恢复上次的绘图环境
    context.restore();
    //保存环境
    context.save();
    

    //绘制分针刻度
    context.lineWidth=2;
    
    for(let i=0;i<60;i++) {
        //旋转角度 
        context.rotate(2*Math.PI/60);
        //绘制时针刻度
        context.beginPath();
        context.moveTo(180, 0);
        context.lineTo(200, 0);
        context.stroke();
    }

     //恢复上次的绘图环境
     context.restore();
    //保存环境
    context.save();
    



    //生成小时数，分钟数，秒数
    const d=new Date();
    //小时
    const hour=d.getHours()%12
    //分钟
    const minute=d.getMinutes()
    //秒
    const second=d.getSeconds()

    //绘制时针刻度
    context.rotate(2*Math.PI/12*hour+(2*Math.PI/12*minute/60)-Math.PI/2);

    //绘制小时针
    context.beginPath();
    context.lineWidth=6;
    
    context.moveTo(-20, 0);
    context.lineTo(70, 0);
    context.stroke();

     //恢复上次的绘图环境
     context.restore();
    //保存环境
    context.save();
    



    //绘制分针旋转角度
    context.rotate(2*Math.PI/60*minute+(2*Math.PI/60*second/60)-Math.PI/2);

    //绘制分针
    context.beginPath();
    context.lineWidth=4;

    context.moveTo(-20, 0);
    context.lineTo(110, 0);
    context.stroke();

     //恢复上次的绘图环境
     context.restore();
    //保存环境
    context.save();
    



      //绘制秒针旋转角度
    context.rotate(2*Math.PI/60*second-Math.PI/2);

    //绘制秒针
    context.beginPath();
    context.lineWidth=2;

    context.moveTo(-20, 0);
    context.lineTo(120, 0);
    context.stroke();

     //恢复上次的绘图环境
     context.restore();
    //保存环境
    context.save();

    context.restore();

    context.restore();
    

   },1000)


</script>
</html>